<template>
  <div class="dashboard-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="background-color: #d3dbeb">
        <div class="title">概览</div>
      </div>
      <div class="chartDiv">
        <mapqq :geometries="geometries" />
        <div v-show="bidSections.length > 0" class="popupDIv">
          <div v-for="bidSection in bidSections" :key="bidSection.lineName">
            <div class="titleDiv">{{ bidSection.lineName }}</div>
            <div class="contentDiv">
              <div v-if="bidSection.sectionName != null" class="content">
                <span class="label">标段：</span>
                <span class="value">{{ bidSection.sectionName }}</span>
              </div>

              <div v-if="bidSection.sectionCount != 0" class="content">
                <span class="label">标段数量：</span>
                <span class="value">{{ bidSection.sectionCount }}</span>
              </div>
              <div class="content">
                <span class="label">工点数量：</span>
                <span class="value">{{ bidSection.tunnelCount }}</span>
              </div>
              <div class="content">
                <span class="label">洞内总人数：</span>
                <span class="value">{{ bidSection.peopleCount }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <el-row class="box-card">
        <el-col :span="8">
          <el-card shadow="never" style="text-align: center">
            环境监测
            <br />
            在线/总数数量：{{ environmentTrackingSummary.onlineCount }} / {{ environmentTrackingSummary.allCount }}
            <br />
            当前报警数量：{{ environmentTrackingSummary.alertCount }}
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="never" style="text-align: center">
            视频监控
            <br />
            在线/总数数量：{{ videoSummary.onlineCount }} / {{ videoSummary.allCount }}
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="never" style="text-align: center">
            安全帽监控
            <br />
            总数数量：{{ safecatSummary.allCount }}
            <br />
            当前报警数量：{{ safecatSummary.alertCount }}
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card bottomCard">
      <div class="divCar">
        <el-table :data="tableData" :header-cell-style="{ backgroundColor: '#d3dbeb' }" style="width: 100%">
          <!-- <el-table-column prop="name" align="center" :label="oneColumn" min-width="120" show-overflow-tooltip /> -->
          <el-table-column align="center" :label="oneColumn" min-width="120" show-overflow-tooltip>
            <template slot-scope="scope">{{ activeIndex === 1 ? scope.row.lineName : activeIndex === 2 ? scope.row.sectionName : activeIndex === 3 ? scope.row.sectionName : '' }}</template>
          </el-table-column>
          <el-table-column prop="pageviews" align="center" :label="twoColumn" min-width="120">
            <template slot-scope="scope">{{ activeIndex === 1 ? scope.row.sectionCount : activeIndex === 2 ? scope.row.lineName : activeIndex === 3 ? scope.row.tunnelName : '' }}</template>
          </el-table-column>
          <el-table-column prop="pageviews" align="center" :label="threeColumn" min-width="120">
            <template slot-scope="scope">{{ activeIndex === 1 ? scope.row.peopleCount : activeIndex === 2 ? scope.row.peopleCount : activeIndex === 3 ? scope.row.peopleCount : '' }}</template>
          </el-table-column>
          <el-table-column align="center" label="环境监测">
            <el-table-column align="center" label="在线/总数" min-width="120">
              <template slot-scope="scope">{{ scope.row.environmentTrackingSummary.onlineCount }} / {{ scope.row.environmentTrackingSummary.allCount }}</template>
            </el-table-column>
            <el-table-column align="center" label="当前报警数量" min-width="120">
              <template slot-scope="scope">{{ scope.row.environmentTrackingSummary.alertCount }}</template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="视频监控">
            <el-table-column align="center" label="在线/总数" min-width="120">
              <template slot-scope="scope">{{ scope.row.videoSummary.onlineCount }} / {{ scope.row.videoSummary.allCount }}</template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="安全帽监测">
            <el-table-column align="center" label="总数" min-width="120">
              <template slot-scope="scope">
                <!-- {{ scope.row.safecatSummary.onlineCount }} /  -->
                {{ scope.row.safecatSummary.allCount }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="当前报警数量" min-width="120">
              <template slot-scope="scope">{{ scope.row.safecatSummary.alertCount }}</template>
            </el-table-column>
          </el-table-column>
          <!-- <el-table-column prop="updateTime" align="center" label="更新时间" min-width="170" /> -->
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
// import Mapqq from '@/components/Mapqq'
import { mapGetters } from 'vuex'
import Mapqq from '@/components/Mapqq/map'
import { getList } from '@/api/dashboard'
// import { tenant } from '@/api/Tenant'
export default {
  name: 'Dashboard',
  components: {
    Mapqq
  },
  data() {
    return {
      // 安全帽监控
      safecatSummary: {},
      // 视频监控
      videoSummary: {},
      // 环境监测
      environmentTrackingSummary: {},
      // 地图显示的工点
      geometries: [],
      // 列表数据
      tableData: [],
      // 分页
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      // 显示标段信息对象
      bidSections: [],
      // 列表列标题
      oneColumn: '标段',
      twoColumn: '工点名称',
      threeColumn: '洞内总人数',
      // restaurants: [],
      // 第几种列表
      activeIndex: ''
      // searchName: '',
      // timeout: null,
    }
  },
  computed: {
    ...mapGetters(['oneLevel'])
  },
  watch: {
    oneLevel: async function (newValue, oldValue) {
      if (!newValue) {
        return
      }
      if (newValue.id !== '概览' && newValue.id !== oldValue.id) {
        await this.getList(newValue.id)
      } else if (newValue.id === '概览') {
        await this.getList(0)
      }
    }
  },
  async mounted() {
    await this.$store.dispatch('user/setCode', '')
    const nubmer = localStorage.getItem('number')
    if (nubmer && nubmer !== '1') {
      localStorage.setItem('number', '1')
    } else {
      localStorage.setItem('number', '2')
    }
    // 判断是否有选中的路线/标段/工点等
    if (this.oneLevel) {
      if (this.oneLevel.id !== '概览') {
        await this.getList(this.oneLevel.id)
      } else {
        this.getList(0)
      }
    }
  },
  methods: {
    // 处理地图工点数据
    tenant(value) {
      // const res = await tenant({
      //   pageIndex: 1,
      //   pageSize: 1e4,
      //   orderBy: 'currentUser'
      // })
      // this.geometries = res.data.items
      this.geometries = value
    },
    // 三种检测
    threeSummary(safecatSummary, videoSummary, environmentTrackingSummary) {
      // 安全帽监控
      this.safecatSummary = safecatSummary
      // 视频监控
      this.videoSummary = videoSummary
      // 环境监测
      this.environmentTrackingSummary = environmentTrackingSummary
    },
    // 地图上的标段信息
    setBidSection(section) {
      this.bidSection.sectionName = section.sectionName
      this.bidSection.SectionCount = section.sectionCount

      this.bidSection.lineName = section.lineName
      this.bidSection.tunnelCount = section.tunnelCount
      this.bidSection.peopleCount = section.peopleCount
    },
    async getList(id = '0') {
      this.bidSections = []
      try {
        const res = await getList(id)
        if (res.code !== 200) {
          return
        }
        this.tenant(res.data.tenants)
        this.threeSummary(res.data.safecatSummary, res.data.videoSummary, res.data.environmentTrackingSummary)
        this.bidSections = res.data.sideinfo

        // 设置标题和获取列表数据
        if (res.data.isAll && !res.data.isLine && !res.data.isSection) {
          // 所有
          this.activeIndex = 1
          this.oneColumn = '路线'
          this.twoColumn = '工点数'
          this.threeColumn = '洞内总人数'
          this.tableData = res.data.tableDataAll
        } else if (!res.data.isAll && res.data.isLine && !res.data.isSection) {
          // 路线
          this.activeIndex = 2
          this.oneColumn = '标段'
          this.twoColumn = '工点数'
          this.threeColumn = '洞内总人数'
          this.tableData = res.data.tableDataLine
        } else if (!res.data.isAll && !res.data.isLine && res.data.isSection) {
          // 标段
          this.activeIndex = 3
          this.oneColumn = '标段'
          this.twoColumn = '工点名称'
          this.threeColumn = '洞内总人数'
          this.tableData = res.data.tableData
        }
      } catch (err) {
        console.log(err)
      }
    },
    handleCurrentChange(val) {
      this.getList()
      console.log(`当前页: ${val}`)
    },
    handleSizeChange(val) {
      this.getList()
      console.log(`每页 ${val} 条`)
    }
  }
}
</script>

<style lang="scss" scoped>
  #app .sidebar-container {
    position: relative;
    width: 100% !important;
    height: calc(100vh - 130px);
  }

  .dashboard {
    &-container {
      .title {
        font-size: 20px;
        padding: 10px 20px;
      }

      .box-card {
        // margin: 10px 0;
        margin-top: 5px;
        font-size: 16px;
        line-height: 22px;
        position: relative;
        top: 10px;

        .el-card {
          // padding-left: 60px;
          border-top: initial;
          border-bottom: initial;
          border-left: initial;
        }

        .el-col:last-child .el-card {
          border: initial;
        }
      }
    }
  }
  .box-card {
    .chartDiv {
      position: relative;
      .popupDIv {
        color: #fff;
        position: absolute;
        right: 20px;
        top: 50px;
        height: 500px;
        overflow-y: auto;
        z-index: 1000;
        border-radius: 6px;
        box-sizing: border-box;
        .titleDiv {
          border-bottom: 1px dotted #ccc;
        }
        .titleDiv,
        .contentDiv {
          box-sizing: border-box;
          padding: 8px 10px;
          font-size: 16px;
          border-radius: 6px;
          background-color: rgba(0, 0, 0, 0.5);
        }
        .contentDiv {
          margin-bottom: 15px;
          font-size: 14px;
          .content {
            display: flex;
            .label {
              text-align: right;
              flex: 1;
              padding: 3px 0px 3px 10px;
              box-sizing: border-box;
              margin-right: 10px;
            }
            .value {
              width: 150px;
              padding: 3px 0px 3px 0px;
              box-sizing: border-box;
            }
          }
        }
      }
    }
    ::v-deep.el-card__header {
      padding: 0px;
    }
  }
  .bottomCard {
    ::v-deep.el-card__body {
      padding: 0px 0px 20px 0px !important;
    }
  }
  .divCar {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>
